<template>
 <div id="pop">
    <div class="module-dialog-layer" style="display: block;"></div>
    <div class="module-dialog clear module-dialog-address module-dialog-show">
        <div class="dialog-panel">
            <div class="topbar">
                <div class="dialog-tit clear">
                    <h4 class="js-dialog-title">管理收货地址</h4>
                </div>
                <span class="dialog-close" @click="closePopchild">x</span>
            </div>
            <div class="dialog-con js-dialog-container">
                <div class="animate-layer">
                    <div class="dialog-inner js-address-add">
                        <div class="save-address-box">
                            <div class="address-form">
                                <div class="module-form-row">
                                    <div class="form-item-v3">
                                        <input type="text" placeholder="收货人姓名" class="js-verify" v-model="receive.name">
                                        <div class="verify-error"></div>
                                    </div>
                                </div>
                                <div class="module-form-row">
                                    <div class="form-item-v3" :class="{'form-invalid-item':phoneError}">                                      
                                        <input type="text" placeholder="手机号" class="js-verify" v-model="receive.phone" @blur="inspectPhone" @focus="setPhone">
                                        <div class="verify-error" v-show="phoneError">手机格式错误</div>
                                    </div>
                                </div>
                                <div class="module-form-row clear">
                                    <div class="form-item-v3 area-code-w fn-left form-valid-item">
                                       
                                        <input type="text" placeholder="区号（可选）" class="js-verify js-address-area-code" v-model="receive.areaCode">
                                        <div class="verify-error"></div>
                                    </div>
                                    <div class="form-item-v3 telephone-w fn-right form-valid-item">
                                        
                                        <input type="text" placeholder="固定电话（可选）" class="js-verify js-address-telephone" v-model="receive.landLine">
                                        <div class="verify-error"></div>
                                    </div>
                                </div>
                                <div class="module-form-row clear">
                                    <div class="form-item-v3 select-item province-wrapper">
                                        <select name="province_code" class="province select-province js-form-province js-verify" v-model="receive.provinceId">
                                            <option value="0">请选择省份</option>
                                            <option :value="item.area_id" v-for='item,index in addList'>{{item.area_name}}</option>
                                          <!--   <option value="440000">广东省</option>
                                            <option value="310000">上海市</option>
                                            <option value="320000">江苏省</option>
                                            <option value="330000">浙江省</option>
                                            <option value="370000">山东省</option>
                                            <option value="410000">河南省</option>
                                            <option value="510000">四川省</option>
                                            <option value="130000">河北省</option>
                                            <option value="420000">湖北省</option>
                                            <option value="340000">安徽省</option>
                                            <option value="350000">福建省</option> -->
                                        </select>
                                    </div>
                                </div>
                                <div class="module-form-row clear">
                                    <div class="form-item-v3 select-item city-wrapper fn-left form-focus-item">
                                        <select class="city select-city js-form-city js-verify" v-model="receive.cityId">
                                            <option value="0">请选择城市</option>                                            
                                            <option :value="city.area_id" v-for='city,index in cityList'>{{city.area_name}}</option>
                                        </select>
                                    </div>
                                    <div class="form-item-v3 select-item district-wrapper fn-right form-focus-item">
                                        <select class="city select-city js-form-city js-verify" v-model="receive.countyId">
                                            <option value="0">请选择区县</option>
                                            <option :value="county.area_id" v-for='county,index in countyList'>{{county.area_name}}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="module-form-row">
                                    <div class="form-item-v3">
                                 
                                        <input type="text" placeholder="详细地址，如街道名称，楼层，门牌号码等" class="js-verify" v-model="receive.add">
                                        <div class="verify-error"></div>
                                    </div>
                                </div>
                                <div class="module-form-row fn-clear">
                                    <input type="checkbox" class="hide">
                                    <span class="blue-checkbox-on" :class="{'blue-checkbox':receive.default}" @click="checkDefault"></span>设为默认
                                    
                                </div>
                                <div class="dialog-blue-btn big-main-btn js-verify-address" :class="{'disabled-btn':!isRight}" @click="submitInfo">
                                    <a>保存</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>    
</div>	
</template>

<script>
//引入省份的数据
import addList from '../lib/addList.js'

export default{
    data(){
        return{
            isRight:false,  //表单验证信息   
            addList,
            receive:{
                "name": "",
                "phone": "",
                "areaCode": "",
                "landLine": "",
                "provinceId": 0,
                "province": "",
                "cityId": 0,
                "city": "",
                "countyId": 0,
                "county": "",
                "add": "",
                "default": true
            },
            phoneError:false
        }

    },
    props: {
      oldReceive: {
        type: Object
      },
      receiveIndex: {
        type: Number
      }
    },
	methods:{
        //子接收父级传过来的  关闭按钮
        closePopchild(){
            this.$emit('close')
        },
        //获取焦点
        setPhone(){
            this.phoneError=false
        },
        //失去焦点
        inspectPhone(){
            if(this.receive.phone.length===11){
               this.phoneError=false
            }else{
                this.phoneError=true
            }
        },
        //默认地址
        checkDefault(){
            this.receive.default=!this.receive.default
        },
        //填写信息表单验证
        inspectReceive(){
            if(this.receive.name&&this.receive.phone&&this.receive.province&&this.receive.city&&this.receive.county&&this.receive.add){
                this.isRight=true
            }else{
                this.isRight=false
            }
        },
        //提交信息  在store中去写方法[添加收货人信息]
        submitInfo(){
            if(this.isRight){
                //把信息传过去
                this.$store.commit('submitInfo22',[this.receive,this.receiveIndex])
                this.$emit('close')
            }
        }
    },
    watch:{
        // 监听某城市id  及时变更数据(数据绑定好)
        'receive.countyId'(){
            this.countyList.forEach((county)=>{
                if(county.area_id===this.receive.countyId){
                    this.receive.county=county.area_name
                    return
                }
            })
        },
        //深度监控验证
        receive:{
            handler(){
                this.inspectReceive()
            },
            deep:true
        }
    },
    computed:{
        // 市 县  获取城市的数据
        cityList(){
            let cityList=[]
            this.addList.forEach((province)=>{
                if(province.area_id===this.receive.provinceId){  //城市相等时把数据拿出来
                    this.receive.province=province.area_name //设置默认值
                    cityList=province.city_list //城市相等时把数据拿出来
                    return
                }
            })
            // 判断显示
            if(this.receive.provinceId==='0'){
                this.receive.cityId=0
                this.receive.countyId=0
            }
            return cityList
        },
        // 县 区  街道
        countyList(){
            let countyList=[]
            this.cityList.forEach((city)=>{
                if(city.area_id===this.receive.cityId){
                    this.receive.city=city.area_name  //设置默认值
                    countyList=city.county_list 
                    return
                }
            })
             // 判断显示
            if(this.receive.cityId==='0'){
                this.receive.countyId=0

            }
            return countyList
        }

    }
}
</script>

<style>
@import url('../assets/css/address-pop.css')	
</style>